<script setup lang="ts">
import { onTargetPage } from "@/utils/globalMethods";
import { MusicButton, FlymeButton } from "./modules";

const imgData = ref([
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture1.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture2.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture3.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture4.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture5.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture10.png",
      import.meta.url
    ).href,
  },
  {
    src: new URL(
      "../../assets/img/scroll-img/" + "picture11.png",
      import.meta.url
    ).href,
  },
]);

// 滚动视差图片容器
const srcollBoxRef = ref();
// 当前图片下标
const curIndex = ref(0);
// 动画是否结束
const isAnimationEnd = ref(false);

onMounted(() => {
  resetElements();
  // 注册鼠标滚轮事件
  window.addEventListener("wheel", mouseWheel);
  // 容器动画结束事件
  srcollBoxRef.value!.addEventListener('transitionend', (e: TransitionEvent) => {
    srcollBoxRef.value!.classList.remove('scroll-down');
    srcollBoxRef.value!.classList.remove('scroll-up');
    isAnimationEnd.value = false;
    resetElements();
  })
});

// 滚轮滚动事件
function mouseWheel(e: WheelEvent) {
  if(!e.deltaY || isAnimationEnd.value) return;
  isAnimationEnd.value = true;
  // 向下滚动
  if (e.deltaY > 0) {
    curIndex.value = getNextIndex();
    srcollBoxRef.value!.classList.add('scroll-down');
  } else {
    curIndex.value = getPrevIndex();
    srcollBoxRef.value!.classList.add('scroll-up');
  }
}

onBeforeUnmount(() => {
  window.removeEventListener("wheel", mouseWheel);
})

// 创建图片元素
function createElement(index: number): HTMLElement {
  const div = document.createElement("div");
  div.className = "item";
  const img = document.createElement("img");
  img.classList.add('w-full');
  img.classList.add('h-full');
  img.style.objectFit = "cover";
  img.src = imgData.value[index].src as string;
  div.appendChild(img);
  srcollBoxRef.value?.appendChild(div);
  return div;
}

function resetElements() {
  // 每次调用重置内容
  srcollBoxRef.value!.innerHTML = "";
  const prevIndex = getPrevIndex();
  const nextIndex = getNextIndex();
  createElement(prevIndex).classList.add("prev");
  createElement(curIndex.value).classList.add("cur");
  createElement(nextIndex).classList.add("next");
}

/**
 * 获取上一张图片下标
 */
function getPrevIndex() {
  return curIndex.value === 0 ? imgData.value.length - 1 : curIndex.value - 1;
}

/**
 * 获取下一张图片下标
 */
function getNextIndex() {
  return curIndex.value === imgData.value.length - 1 ? 0 : curIndex.value + 1;
}

defineExpose({
  imgData,
});

defineOptions({
  name: "Index",
});
</script>

<template>
  <div class="index flex items-center justify-center">
    <div class="btn-group">
      <div class="music" @click="onTargetPage('/music')">
        <MusicButton />
      </div>

      <div class="flyme" @click="onTargetPage('/flyme')">
        <FlymeButton />
      </div>
    </div>

    <!-- 视差滚动容器 -->
    <div class="scroll-box" ref="srcollBoxRef"></div>
  </div>
</template>

<style lang="scss">
// 这里不能加上scoped
// 原因：vue会帮我们在加上一个hash值以防样式冲突，但是外面通过js创建的元素的类名是没有这个hash值的，所以才会导致样式不生效
.scroll-box {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .item {
    transition: all 0.3s linear;
  }
  .prev {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 1;
    transform: translateY(-10px);
  }
  .cur {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .next {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 1;
  }
}

.scroll-up {
  .prev {
    height: 100%;
  }
}

.scroll-down {
  .next {
    height: 100%;
  }
}
</style>

<style lang="scss" scoped>
.btn-group {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 50px;
}

</style>
